<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<!-- 定位: 将元素正确布局
		     ① 浮动定位: 左右布局
			 
			 ② 相对定位: 微调布局针对单一元素 
			 position: relative; 声明元素进行相对定位
			 特点: 相对与父级进行定位 不脱离文档流
			 附加属性: 方向属性: left top right bottom
			 属性值: 正负数值px
			         z轴叠加属性: z-index--属性值: 数值 数值越大 越靠前
					 左栏: 挂靠位【固定】相对定位
			
			 ③ 绝对定位: 叠加效果 通常与相对定位搭配使用 左栏 侧边栏 遮罩层 
			            挂靠点: 弹出  绝对定位
			 position: absolute;  声明元素进行绝对定位
			 特点: 相对于祖先{页面左上顶角}进行定位 
			       如果有父元素 按照父元素【左上顶角】 脱离文档流
			 使用方法: 通常与相对定位搭配使用
			 
			 ④ 固定定位: fixed 页面区域固定到页面上
			 
			 ⑤ 文档流定位: 按照元素分类进行定位: 块与块【纵排】
											   行与行【横排】
											   块与行【横排】
			 -->
			<style>
				div{
					width: 300px;
					height: 300px;
				}
				div.box1{
					background: url(img/1.png);
					background-size: 100%;
					/* 相对定位: 相对就近父级 */
					position: absolute;
					left: 0px;   /*280*/
					top: 0px;
					/* 叠加属性 */
					z-index: 1;
					
				}
				div.box2{
					background: url(img/2.png);
					background-size: 100%;
					position: absolute;
					left: 0px;
					top: 0px;
					z-index: 1;
					
				}
			</style>
			
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		
	</body>
</html>